﻿<!--X-Template 组件模板-->
<!--设备选择器-->
<script type="text/x-template" id="device-selector-template">
    <div class="device-container">
            <div>
                <span class="title-text">选择检查设备：</span>
            </div>
            <div style="min-height:50px;padding-top:10px;">
                <div style="width:100%;text-align:center;color:#909399;" v-if="devices.length===0">暂无设备 </div>
                <el-tag v-for="(item,index) in devices"
                                                      type="primary"
                                                      :key="item.id"
                                                      :effect="item.id ===selectedId ? 'dark':'light'"
                                                      v-on:click="deviceClickHandle(item)"
                                                      style="margin-left:15px;"
                                                      size="mini">
                                                  {{ item.name }}
                </el-tag>
            </div>
    </div>
</script>
<script>
    var DeviceSelectorComponent= {
          model:{
               prop:'value',   // 双向绑定时,传入的值绑定给 value属性
               event:'change'  // 双向绑定时，使用change事件往外传值给 v-model绑定的父组件变量
          },
          props: {
               deviceTypeId:String,
               value:String // 选中设备的Id
          },
          template:'#device-selector-template',  // 组件模板
          data:function() {
            return {
                devices:[],
                selectedId:null,
            }
          },
          computed:{
              
          },
          watch:{
              // 监听设备类型Id属性的改变
              deviceTypeId:function(value){
                var cvm = this;
                cvm.loadDeviceList(false);
              },
              value:function(val){
                var cvm = this;
                cvm.selectedId = val;
              }
          },
          methods: {
               deviceClickHandle(item){
                    var cvm = this;
                    cvm.selectedId= item.id;
                    cvm.$emit('change',cvm.selectedId);
                    //cvm.devices = [...cvm.devices];
               },

               loadDeviceList(init){
                   var cvm = this;
                   return new Promise(resolve=>{
                           if(cvm.deviceTypeId){
                               abp.ajax({
                                  type:'get',
                                  url:`/api/manual-appoint/get-device-list?deviceTypeId=${cvm.deviceTypeId}`
                               }).then(res=>{
                                   if(res.code===0){
                                       if(!cvm.selectedId){
                                           cvm.selectedId =res.data[0].id;
                                             cvm.$emit('change',cvm.selectedId);
                                       }
                                       cvm.devices =res.data;
                                   }
                               })
                           }
                           else{
                               cvm.devices=[];
                               cvm.$emit('change',null);
                           } 
                           resolve();
                   });
               }
          },
          created(){
              var cvm = this;
              cvm.loadDeviceList(true);
          }
     };
</script>
<style>
     .device-container{
        display:flex;
        flex-direction:column;
    }
</style>